<template>
  <div id="gaodeMap">
    <div class="headerTitle"></div>

    <!-- 左右侧边内容 -->
    <div class="content">
      <div class="commonStatic aside-left-show">
        <div class="commonLeft" @click="getList(1)">
          <div class="innerNum">{{ OnCompanyNum }}</div>
        </div>
        <div class="commonR" @click="getList(0)">
          <div class="innerNum">{{ OffCompanyNum }}</div>
        </div>
      </div>
      <div class="equipStatus aside-left-show">
        <div class="allNum">{{ equipmentNum }}</div>
        <div id="pieBox"></div>

        <!-- <div class="boxContent">
          <div class="leftBox">
            
            <div class="num1">{{ OnEquipmentNum }}</div>
          </div>
          <div class="rightBox">
            
            <div class="num2">{{ OffEquipmentNum }}</div>
          </div>
        </div> -->
      </div>

      <div class="videoAlarm aside-left-show">
        <div class="title">预警数量</div>
        <img
          @click="chooseAlarmDialog"
          class="imgPic"
          src="@/assets/allPic/组 48424@1x.png"
          alt=""
        />
        <div class="innerNum">{{ alarmRecordNum }}</div>
      </div>
      <div class="feelData aside-right-show">
        <div class="alarmItemTable">
          <div class="alarmLeftBox">
            <div class="alarmTitle">{{ gasValue }}</div>
            <div class="alarmBox">
              <div
                :class="[
                  'alarmListItem',
                  { alarmListItemChecked: item.name == gasValue },
                ]"
                v-for="item in gasAlarmList"
                :key="item.name"
                @click="chooseGas(item)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="alarmRightBox">
            <div class="alarmTitle">{{ companyValue }}</div>
            <div class="alarmBox">
              <div
                :class="[
                  'alarmListItem',
                  { alarmListItemChecked: item.name == companyValue },
                ]"
                v-for="item in companyAlarmList"
                :key="item.name"
                @click="chooseCompany(item)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>

          <div
            class="alarmSubBox"
            v-for="(item, index) in warmListTable"
            :key="index"
          >
            <div class="companyName">
              <div class="alarmSubBox_title titleBild">公司名称：</div>
              <div class="companyNameData">{{ item.departmentName }}</div>
            </div>

            <div class="dianweiBox">
              <div class="titleBild">
                点&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：
              </div>
              <div class="dianweiBox_content">
                <div class="line1">渗滤液坑道间2#</div>
                <div class="line1">
                  {{ item.hj212Name }}{{ item.number }}{{ item.unit }}
                </div>
              </div>
              <div class="titleBild" style="margin-left: 30px">类型：</div>
              <div
                class="warmType"
                :class="{
                  'yellow-text': item.level === 1,
                  'red-text': item.level === 2,
                }"
              >
                {{
                  item.level === 1
                    ? '一级报警'
                    : item.level === 2
                    ? '二级报警'
                    : '未知级别'
                }}
              </div>
            </div>

            <div class="companyName">
              <div class="alarmSubBox_title titleBild">开始时间：</div>
              <div class="companyNameData">{{ item.createTime }}</div>
            </div>
            <div class="companyName">
              <div class="alarmSubBox_title titleBild">处理情况：</div>
              <div class="companyNameData">{{ item.createTime }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="equipmentMaintenance">
        <div class="titleBOx">
          <div class="name">公司名称</div>
          <div class="name alarmProject">设备名称</div>
          <div class="name alarmValue">维保时间</div>
          <div class="name alarmTime">下次维保</div>
        </div>
        <!-- <div class="subList">
          <div class="subBox">
            <div class="name">22222</div>
            <div class="name">33333333</div>
            <div class="name">rrreeeee</div>
            <div class="name">313232323</div>
          </div>
          <div class="subBox">
            <div class="name">22222</div>
            <div class="name">33333333</div>
            <div class="name">rrreeeee</div>
            <div class="name">313232323</div>
          </div>
          <div class="subBox">
            <div class="name">22222</div>
            <div class="name">33333333</div>
            <div class="name">rrreeeee</div>
            <div class="name">313232323</div>
          </div>
          <div class="subBox">
            <div class="name">22222</div>
            <div class="name">33333333</div>
            <div class="name">rrreeeee</div>
            <div class="name">313232323</div>
          </div>
          <div class="subBox">
            <div class="name">22222</div>
            <div class="name">33333333</div>
            <div class="name">rrreeeee</div>
            <div class="name">313232323</div>
          </div>
          <div class="subBox">
            <div class="name">22222</div>
            <div class="name">33333333</div>
            <div class="name">rrreeeee</div>
            <div class="name">313232323</div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="footerNav"></div>

    <div class="pointBox">
      <div class="wangNBox1">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">定西鹭江环保电力有限责任公司</div>
      </div>
      <div class="wangNBox1 wangNBox2" @click="skipSubPage(2)">
        <div class="img">
          <img src="@/assets/allPic/渠县旺能环保能源有限公司@1x.png" alt="" />
        </div>
        <div class="wangNContent">渠县旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox3">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">铜仁旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox4">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">攀枝花旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox5">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">河池旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox6">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">公安县旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox7">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">监利旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox8">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">荆州旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox9">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">汕头市澄海洁源垃圾发电厂有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox10">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">许昌旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox11" @click="skipSubPage(11)">
        <div class="img">
          <img src="@/assets/allPic/渠县旺能环保能源有限公司@1x.png" alt="" />
        </div>
        <div class="wangNContent">鹿邑旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox12" @click="skipSubPage(12)">
        <div class="img">
          <img src="@/assets/allPic/渠县旺能环保能源有限公司@1x.png" alt="" />
        </div>
        <div class="wangNContent">淮北旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox13" @click="skipSubPage(13)">
        <div class="img">
          <img src="@/assets/allPic/渠县旺能环保能源有限公司@1x.png" alt="" />
        </div>
        <div class="wangNContent">安吉旺能再生资源利用有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox14">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">丽水旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox15">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">德清旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox16">
        <div class="img">
          <img
            src="@/assets/allPic/渠县旺能环保能源有限公司@1x.png"
            alt=""
            @click="skipSubPage(16)"
          />
        </div>
        <div class="wangNContent">湖州南太湖环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox17">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">舟山旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox18">
        <div class="img">
          <img src="@/assets/allPic/Pin 38@1x.png" alt="" />
        </div>
        <div class="wangNContent">台州旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox19" @click="skipSubPage(19)">
        <div class="img">
          <img src="@/assets/allPic/渠县旺能环保能源有限公司@1x.png" alt="" />
        </div>
        <div class="wangNContent">兰溪旺能环保能源有限公司</div>
      </div>
      <div class="wangNBox1 wangNBox20" @click="skipSubPage(20)">
        <div class="img">
          <img src="@/assets/allPic/渠县旺能环保能源有限公司@1x.png" alt="" />
        </div>
        <div class="wangNContent">青田旺能环保能源有限公司</div>
      </div>
    </div>
    <div class="enterprise1dialogVisible" v-if="showDialog">
      <div class="closeX">
        <img
          src="@/assets/allPic/组 60@1x.png"
          alt=""
          @click="closeDialogShow"
        />
      </div>
      <div class="title">{{ dialogTitle }}</div>
      <!-- <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-row-style="{
            backgroundColor: '#666666 ',
            color: '#fff',
            // borderBottom: '1px solid #fff',
            height: '50px',
            fontSize: '18px'
          }"
          :header-cell-style="{
            backgroundColor: '#666666',
            color: '#fff',
            // borderBottom: '1px solid #fff',
            height: '50px',
            padding: '7px 0'
          }"
          :row-style="{
            backgroundColor: '#232732',
            color: '#fff',
            height: '50px'
          }"
          :cell-style="{
            borderBottom: '1px solid #fff',
            height: '50px',
            padding: '7px 0'
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="name"
            label="企业名称"
            width="315"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="director"
            label="负责人"
            width="160"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="phone"
            label="联系电话"
            width="160"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="detail"
            label="详细地址"
            width="400"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div> -->
      <div class="tableBox">
        <div class="tableTitle">
          <div class="name">企业名称</div>
          <div class="director">负责人</div>
          <div class="phone">联系电话</div>
          <div class="detail">详细地址</div>
        </div>
        <div class="tableContent">
          <div class="tableItem" v-for="item in tableData" :key="item.id">
            <div class="name" @click="skipPageFromName(item.serviceFile)">
              {{ item.name }}
            </div>
            <div class="director">{{ item.director }}</div>
            <div class="phone">{{ item.phone }}</div>
            <div class="detail" :title="item.detail">{{ item.detail }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="footerPage">
        <el-pagination
          :current-page.sync="params.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="totalItem"
          @current-change="currentChange"
        />
      </div> -->
    </div>

    <div class="alarmDialogVis" v-if="alarmDialog">
      <div class="closeX">
        <img
          src="@/assets/allPic/组 60@1x.png"
          alt=""
          @click="closeAlarmDialogShow"
        />
      </div>
      <div class="title">预警列表</div>
      <div class="formDiv">
        <div class="formItem">
          <div class="title">企业名称</div>
          <div class="val">
            <el-input class="formInp" v-model="formInline.user"></el-input>
          </div>
        </div>
        <div class="formItem">
          <div class="title">企业名称</div>
          <div class="val">
            <el-input class="formInp" v-model="formInline.user"></el-input>
          </div>
        </div>
        <div>
          <el-button class="searchBtn" type="primary" @click="onSubmitForm"
            >搜索</el-button
          >
        </div>
      </div>
      <div class="table">
        <el-table
          :data="alarmTableData"
          style="width: 100%; border: 'none'"
          :header-row-style="{
            backgroundColor: '#393939',
            color: '#fff',
            borderBottom: '1px solid #022627',
            borderRight: '1px solid #022627',
            height: '32px',
          }"
          :header-cell-style="{
            backgroundColor: '#393939',
            color: '#fff',
            borderBottom: '1px solid #022627',
            height: '32px',
            padding: '7px 0',
          }"
          :row-style="{
            backgroundColor: '#232732',
            color: '#fff',
            height: '32px',
          }"
          :cell-style="{
            height: '32px',
            padding: '7px 0',
          }"
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="deviceName"
            label="企业名称"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="deviceContent"
            label="点位"
            :show-overflow-tooltip="true"
          >
          </el-table-column>

          <el-table-column
            header-align="center"
            align="center"
            prop="deviceStatus"
            label="类型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.deviceStatus === '在用'">{{
                scope.row.deviceStatus
              }}</span>
              <span v-else style="color: #ff9c9c">{{
                scope.row.deviceStatus
              }}</span>
            </template>
          </el-table-column>

          <el-table-column
            header-align="center"
            align="center"
            prop="deviceCompany"
            label="开始时间"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="alarmParams.page"
          :page-size="10"
          background
          layout="prev, pager, next"
          :total="alarmTotalItemCount"
          @current-change="currentPageAlarm"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { wangNStatistics, getList, getWarmList } from '@/api/index'
export default {
  name: 'overallPage',
  props: {},
  components: {},
  data() {
    return {
      OnCompanyNum: '',
      OffCompanyNum: '',
      equipmentNum: '',
      OnEquipmentNum: '',
      OffEquipmentNum: '',
      alarmRecordNum: '',
      showDialog: false,
      tableData: [],
      params: {
        page: 1,
        pageSize: 10,
      },
      totalItem: null,
      dialogTitle: '',
      warmListTable: [],
      alarmDialog: false,
      formInline: {},
      alarmTableData: [
        {
          deviceName: 'ss',
        },
      ],
      alarmTotalItemCount: null,
      alarmParams: {
        page: 1,
        pageSize: 10,
      },
      gasAlarmList: [
        // {
        //   name: '1111111',
        // },
        // {
        //   name: '222222',
        // },
        // {
        //   name: '333333',
        // },
        // {
        //   name: '444444',
        // },
        // {
        //   name: '555555',
        // },
        // {
        //   name: '66666',
        // },
        // {
        //   name: '7677777',
        // },
      ],
      companyAlarmList: [
        // {
        //   name: '1111111',
        // },
        // {
        //   name: '222222',
        // },
        // {
        //   name: '333333',
        // },
        // {
        //   name: '444444',
        // },
        // {
        //   name: '555555',
        // },
        // {
        //   name: '66666',
        // },
        // {
        //   name: '7677777',
        // },
      ],
      gasValue: '筛选气体',
      companyValue: '筛选单位',
      intervalId: null, // 用于保存定时器 ID
    }
  },
  methods: {
    drow_piebox() {
      var myChart = this.$echarts.init(document.getElementById('pieBox'))
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: 'item',
        },
        legend: {
          show: false,
          icon: 'circle',
          top: '85%',
          left: 'center',
          itemGap: 90,
          data: [
            {
              name: '设备在线',
              textStyle: {
                color: '#fff', // 系列1的文本颜色设置为红色
              },
            },
            {
              name: '设备离线',
              textStyle: {
                color: '#fff', // 系列1的文本颜色设置为红色
              },
            },
          ],
        },
        series: [
          {
            type: 'pie',
            radius: ['45%', '60%'],
            padAngle: 3,
            label: {
              fontSize: 14,
              color: '#fff',
            },
            itemStyle: {
              borderRadius: 5,
            },
            data: [
              {
                value: this.OnEquipmentNum,
                name: '设备在线',
                itemStyle: {
                  color: '#1AFFE8', // 指定数据项的颜色
                },
              },
              {
                value: this.OffEquipmentNum,
                name: '设备离线',
                itemStyle: {
                  color: '#FF5B74', // 指定数据项的颜色
                },
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      })
      // let _this = this
      // myChart.on('click', function (params) {
      //   const filterL = _this.leftStreetList.filter(item => item.checked)
      //   const renderL = filterL.map(item => item.areaCode)
      //   _this.getCleaningRecord(renderL.length ? renderL : null)
      //   _this.showZhengchangDialog = true
      //   if (params.name === '正常清洗数') {
      //     _this.cleanStatus = '1'
      //   } else if (params.name === '超期清洗数') {
      //     _this.cleanStatus = '2'
      //   }
      // })
    },
    skipPageFromName(link) {
      if (link) {
        window.location.href = link + '?skipType=1'
      }
    },
    skipSubPage(pageNum) {
      console.log(pageNum)
      if (pageNum === 20) {
        window.location.href =
          'https://lindro.cn/yx-system/wnSubScreen/qtwnScreen/index.html?skipType=1'
      } else if (pageNum === 2) {
        window.location.href =
          'https://lindro.cn/yx-system/wnSubScreen/qxwnScreen/index.html?skipType=1'
      } else if (pageNum === 11) {
        window.location.href =
          'https://lindro.cn/yx-system/wnSubScreen/lywnScreen/index.html?skipType=1'
      } else if (pageNum === 12) {
        window.location.href =
          'https://lindro.cn/yx-system/wnSubScreen/hbwnScreen/index.html?skipType=1'
      } else if (pageNum === 13) {
        window.location.href =
          'https://lindro.cn/yx-system/wnScreen/wnScreen/index.html?skipType=1'
      } else if (pageNum === 19) {
        window.location.href =
          'https://lindro.cn/yx-system/wnSubScreen/lxwnScreen/index.html?skipType=1'
      } else if (pageNum === 16) {
        window.location.href =
          'https://lindro.cn/yx-system/wnSubScreen/nthwnScreen/index.html?skipType=1'
      }
    },
    async getWarmList() {
      const res = await getWarmList({
        cmsUserId: 214,
        typePid: '1',
        status: '1,2,3,4,7',
      })
      this.warmListTable = res.data
      console.log(6, res)
    },
    async wangNStatistics() {
      const res = await wangNStatistics({ pid: 10 })
      console.log(res)
      this.OnCompanyNum = res.data.find(
        (item) => item.key == 'OnCompanyNum'
      ).value
      this.OffCompanyNum = res.data.find(
        (item) => item.key == 'OffCompanyNum'
      ).value
      this.equipmentNum = res.data.find(
        (item) => item.key == 'equipmentNum'
      ).value
      this.OnEquipmentNum = res.data.find(
        (item) => item.key == 'OnEquipmentNum'
      ).value
      this.OffEquipmentNum = res.data.find(
        (item) => item.key == 'OffEquipmentNum'
      ).value
      this.alarmRecordNum = res.data.find(
        (item) => item.key == 'alarmRecordNum'
      ).value
      this.drow_piebox()
    },
    async getList(remarks) {
      this.showDialog = true
      if (remarks == 1) {
        this.dialogTitle = '已接入数'
      } else {
        this.dialogTitle = '未接入数'
      }
      const res = await getList({
        descCreateTime: 2,
        disableFlag: -100,
        levels: -100,
        pid: 10,
        remarks,
      })
      this.tableData = res.data
    },
    closeDialogShow() {
      this.showDialog = false
    },
    currentChange() {},
    chooseAlarmDialog() {
      this.alarmDialog = true
    },
    closeAlarmDialogShow() {
      this.alarmDialog = false
    },
    onSubmitForm() {},
    currentPageAlarm() {},
    chooseGas(item) {
      this.gasValue = item.name
    },
    chooseCompany(item) {
      this.companyValue = item.name
    },
    checkLoginStatus() {
      const wangneng_token = localStorage.getItem('wangneng_token')
      const wangneng_loginTimestamp = Number(
        localStorage.getItem('wangneng_loginTimestamp')
      )
      const wangneng_loginTimeout = Number(
        localStorage.getItem('wangneng_loginTimeout')
      )

      if (wangneng_token) {
        const now = Date.now()
        const elapsedTime = now - wangneng_loginTimestamp // 计算经过的时间

        if (elapsedTime > wangneng_loginTimeout) {
          // 超过登录时效，清除登录状态
          localStorage.removeItem('wangneng_token')
          localStorage.removeItem('wangneng_loginTimestamp')
          localStorage.removeItem('wangneng_loginTimeout')
          this.$message.warning('登录已过期，请重新登录')
          this.$router.push('/login')
        }
      } else {
        this.$message.warning('登录已过期，请重新登录')

        this.$router.push('/login')
      }
    },
  },
  created() {
    setTimeout(() => {
      this.wangNStatistics()
      this.getWarmList()
    }, 0)
    setInterval(() => {
      this.wangNStatistics()
      this.getWarmList()
    }, 1000 * 60 * 5)
  },
  mounted() {
    this.drow_piebox()
    this.checkLoginStatus()
    this.intervalId = setInterval(() => {
      this.checkLoginStatus()
    }, 60 * 60 * 1000)
  },
  beforeDestroy() {
    // 在组件销毁前清除定时器
    if (this.intervalId) {
      clearInterval(this.intervalId)
    }
  },
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
// 地图
#gaodeMap {
  width: 1920px;
  height: 1080px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  position: absolute;
  background-image: url('@/assets/allPic/中国地图3@1x.png');
}
.content {
  position: relative;
  z-index: 99;
  .commonStatic {
    background-image: url('@/assets/allPic/L1.png');
    position: absolute;
    left: 11px;
    top: 72px;
    width: 400px;
    height: 279px;
    display: flex;
    justify-content: space-around;
    .innerTitle {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      margin: 10px 0;
      color: #fff;
    }
    .innerTitle1 {
      color: #1affe8;
    }
    .innerNum {
      text-align: center;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
    }
    .commonLeft {
      padding-top: 219px;
      padding-left: 11px;
      cursor: pointer;
    }
    .commonR {
      padding-top: 219px;
      padding-right: 11px;
      cursor: pointer;
    }
  }
  .equipStatus {
    background-image: url('@/assets/allPic/L2.png');
    background-repeat: no-repeat;
    width: 402px;
    height: 367px;
    position: absolute;
    left: 11px;
    top: 363px;

    #pieBox {
      position: absolute;
      top: 130px;
      left: 0;
      width: 400px;
      height: 237px;
      // background-color: #998585;
    }
    .detail {
      color: #5de1d4;
      font-size: 12px;
      font-weight: bold;
      position: absolute;
      top: 5px;
      left: 327px;
      cursor: pointer;
    }
    .num1 {
      color: #1affe8;
      font-size: 23px;
      font-weight: bold;
      text-align: center;
      // border-bottom: 1px solid #1affe8;
      padding-bottom: 5px;
      margin: 10px 0;
    }
    .num2 {
      color: #fff;
      font-size: 23px;
      font-weight: bold;
      text-align: center;
      // border-bottom: 1px solid #fff;
      padding-bottom: 5px;
      margin: 10px 0;
    }
    .title {
      color: #fff;
      text-align: center;
      margin: 20px 0;
    }
    .boxContent {
      display: flex;
      justify-content: space-between;
      padding: 0 70px;
      padding-top: 229px;
    }
    .allNum {
      position: absolute;
      top: 85px;
      left: 245px;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
    }
  }

  .videoAlarm {
    background-image: url('@/assets/allPic/气体趋势.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 400px;
    height: 301px;
    position: absolute;
    left: 11px;
    top: 742px;
    .imgPic {
      position: absolute;
      left: 165px;
      top: 90px;
      cursor: pointer;
    }
    .title {
      font-family: Source Han Sans;
      font-size: 16px;
      font-weight: bold;
      color: #ff5b74;
      text-align: center;
      position: absolute;
      top: 189px;
      left: 169px;
    }
    .detail {
      color: #5de1d4;
      font-size: 12px;
      font-weight: bold;
      position: absolute;
      top: 8px;
      left: 327px;
      cursor: pointer;
    }
    .innerNum {
      width: 400px;
      text-align: center;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      position: absolute;
      top: 220px;
      cursor: pointer;
    }
  }
  .feelData {
    z-index: 999;
    width: 400px;
    height: 971px;
    background-image: url('@/assets/allPic/R1.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 11px;
    top: 72px;
    padding: 0 6px;
    padding-top: 52px;
    .detail {
      color: #5de1d4;
      font-size: 12px;
      font-weight: bold;
      position: absolute;
      top: 4px;
      left: 327px;
      cursor: pointer;
    }

    .alarmItemTable {
      height: 918px;
      overflow-y: auto;
      padding-left: 10px;
      overflow-x: hidden;

      .alarmTitle {
        color: #bafafa;
        font-size: 14px;
        padding-left: 8px;
        cursor: pointer;
        height: 28px;
        line-height: 28px;
      }
      .alarmLeftBox {
        background-image: url('@/assets/allPic/组 48456@1x.png');
        width: 120px;
        height: 28px;
        line-height: 28px;
        position: absolute;
        right: 142px;
        top: 7px;
        .alarmBox {
          display: none;
          background-image: url('@/assets/allPic/矩形 28299@1x.png');
          width: 160px;
          height: 176px;
          transform: translateX(-16px);
          background-repeat: no-repeat;
          background-size: cover;
          overflow-y: auto;
          overflow-x: hidden;
          z-index: 111;
          .alarmListItem {
            color: #fff;
            width: 160px;
            text-align: center;
            padding: 0;
            overflow: hidden; /* 隐藏溢出的部分 */
            white-space: nowrap; /* 保持文本在一行内 */
            text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
            // border-bottom: 1px solid #ccc; /* 增加分隔线 */
            cursor: pointer;
          }
          .alarmListItemChecked {
            color: #00ffff;
          }
        }
      }

      .alarmTitle:hover .alarmBox {
        display: block;
      }
      .alarmListItem:hover .alarmBox {
        display: block;
      }
      .alarmLeftBox:hover .alarmBox {
        display: block;
      }
      .alarmRightBox:hover .alarmBox {
        display: block;
      }

      .alarmRightBox {
        background-image: url('@/assets/allPic/组 48456@1x.png');
        width: 120px;
        height: 28px;
        line-height: 28px;
        position: absolute;
        right: 10px;
        top: 7px;
        .alarmBox {
          display: none;
          background-image: url('@/assets/allPic/矩形 28299@1x.png');
          width: 160px;
          height: 176px;
          transform: translateX(-16px);
          background-repeat: no-repeat;
          background-size: cover;
          overflow-y: auto;
          overflow-x: hidden;
          .alarmListItem {
            color: #fff;
            width: 160px;
            text-align: center;
            padding: 0;
            overflow: hidden; /* 隐藏溢出的部分 */
            white-space: nowrap; /* 保持文本在一行内 */
            text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
            cursor: pointer;
          }
          .alarmListItemChecked {
            color: #00ffff;
          }
        }
      }

      .titleBild {
        font-weight: bold;
      }
      .alarmSubBox {
        padding-top: 15px;
        padding-left: 17.8px;
        margin-bottom: 12px;
        color: #ffffff;
        font-family: Source Han Sans;
        font-size: 14px;
        line-height: normal;
        letter-spacing: 0em;
        font-size: 14px;
        width: 379.16px;
        height: 151.05px;
        background-image: url('@/assets/allPic/R1_1.png');
        background-size: cover;
        background-repeat: no-repeat;
        box-sizing: border-box;

        .companyName {
          display: flex;
          margin: 5px 0;
        }

        .yellow-text {
          color: #ff9900;
        }

        .red-text {
          color: #ff5b74;
        }
      }

      .dianweiBox {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        // margin-top: 10px;
        margin: 5px 0;
      }

      .alarmItem {
        color: #fff;
        font-size: 14px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba($color: #2efffe, $alpha: 0.2);
        padding: 6px 6px 10px;
        .name {
          width: 25%;
          text-align: center;
        }
      }
    }
  }

  .equipmentMaintenance {
    z-index: 9999;
    width: 1074px;
    height: 280px;
    background-image: url('@/assets/allPic/B1.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: 422px;
    top: 761px;
    padding: 0 6px;

    .titleBOx {
      display: flex;
      align-items: center;
      height: 40px;
      margin-top: 51px;
      color: #fff;
      font-size: 16px;
      background: rgba(46, 255, 254, 0.2);
      border-radius: 3px;
      margin-bottom: 10px;
      .name {
        width: 25%;
        text-align: center;
      }
    }
    .subList {
      height: 189px;
      overflow-y: auto;

      .subBox {
        height: 40px;
        color: #fff;
        font-size: 14px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba($color: #2efffe, $alpha: 0.2);
        padding: 6px 6px 10px;
      }
      .name {
        width: 25%;
        text-align: center;
      }
    }
  }
}
.headerTitle {
  z-index: 99;
  background-image: url('@/assets/allPic/head.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  box-sizing: border-box;
  width: 1920px;
  height: 92px;
  position: absolute;
  left: 0;
  top: 0;
}
.footerNav {
  z-index: 99;
  background-image: url('@/assets/allPic/foot@1x.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  width: 1920px;
  height: 48px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.pointBox {
  .wangNBox1 {
    position: absolute;
    left: 965.89px;
    top: 468px;
    cursor: pointer;
    .wangNContent {
      display: none;
      background-image: url('@/assets/allPic/矩形 28286@1x.png');
      width: 224px;
      height: 31px;
      position: absolute;
      left: -109px;
      top: -33px;
      color: #1affe8;
      font-size: 14px;
      text-align: center;
      line-height: 30px;
    }
  }
  .wangNBox1:hover .wangNContent {
    display: block;
  }
  .wangNBox2 {
    position: absolute;
    left: 993px;
    top: 549px;
  }
  .wangNBox3 {
    position: absolute;
    left: 1023.64px;
    top: 613px;
  }
  .wangNBox4 {
    position: absolute;
    left: 936px;
    top: 621px;
  }
  .wangNBox5 {
    position: absolute;
    left: 1033px;
    top: 658px;
  }
  .wangNBox6 {
    position: absolute;
    left: 1094.22px;
    top: 566.2px;
  }
  .wangNBox7 {
    position: absolute;
    left: 1087px;
    top: 559px;
  }
  .wangNBox8 {
    position: absolute;
    left: 1103.2px;
    top: 559px;
  }
  .wangNBox9 {
    position: absolute;
    left: 1147.24px;
    top: 674.37px;
  }
  .wangNBox10 {
    position: absolute;
    left: 1103px;
    top: 494px;
  }
  .wangNBox11 {
    position: absolute;
    left: 1124.69px;
    top: 503px;
  }
  .wangNBox12 {
    position: absolute;
    left: 1155.36px;
    top: 513.4px;
  }
  .wangNBox13 {
    z-index: 9999;
    position: absolute;
    left: 1197px;
    top: 557px;
  }
  .wangNBox14 {
    position: absolute;
    left: 1192px;
    top: 599.4px;
  }
  .wangNBox15 {
    position: absolute;
    left: 1202.4px;
    top: 562.4px;
  }
  .wangNBox16 {
    position: absolute;
    left: 1209.6px;
    top: 557.9px;
  }
  .wangNBox17 {
    position: absolute;
    left: 1236.56px;
    top: 568px;
  }
  .wangNBox18 {
    position: absolute;
    left: 1223.58px;
    top: 595.8px;
  }
  .wangNBox19 {
    position: absolute;
    left: 1203.7px;
    top: 585px;
  }
  .wangNBox20 {
    position: absolute;
    left: 1203.7px;
    top: 606.6px;
  }
}
.enterprise1dialogVisible {
  z-index: 9999;
  width: 1095px;
  height: 719px;
  background-image: url('@/assets/allPic/组 143@1x.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 181px;
  .closeX {
    display: flex;
    justify-content: right;
    padding-right: 5px;
    padding-top: 5px;
    img {
      cursor: pointer;
    }
  }
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    padding-left: 30px;
    margin-bottom: 8px;
    text-align: center;
  }
  .table {
    padding: 0 30px;
    .el-table .warning-row {
      background-color: transparent;
      background: #022627 !important;
    }
    .el-table::before {
      display: none;
    }
  }
  .footerPage {
    width: 100%;
    text-align: center;
    margin: 10px auto 0;
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #232732 !important; // 进行修改选中项背景和字体
      color: #fff;
    }
  }
  .picBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 44px;
    margin-bottom: -31px;
    box-sizing: border-box;
    img {
      width: 429px;
      height: 214px;
      margin-bottom: 31px;
    }
  }
  ::v-deep .el-table__empty-block {
    background-color: #232732 !important;
    border: none;
    .el-table__empty-text {
      color: #fff;
    }
  }
  ::v-deep .el-table,
  .el-table__expanded-cell {
    background-color: #232732;
  }
  .tableBox {
    padding: 0 30px;
    .tableTitle {
      display: flex;
      background-color: #393939;
      height: 50px;
      line-height: 50px;
      color: #fff;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      .name {
        width: 315px;
      }
      .director {
        width: 160px;
      }
      .phone {
        width: 160px;
      }
      .detail {
        width: 400px;
      }
    }
    .tableItem {
      display: flex;
      height: 50px;
      line-height: 50px;
      color: #fff;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      border-bottom: 1px solid #fff;
      .name {
        cursor: pointer;
        width: 315px;
      }
      .director {
        width: 160px;
      }
      .phone {
        width: 160px;
      }
      .detail {
        width: 400px;
        overflow: hidden; /* 隐藏溢出的文本 */
        white-space: nowrap; /* 不换行 */
        text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
        cursor: pointer; /* 鼠标悬停时显示指针手势 */
      }
    }
    .tableContent {
      height: 556px;
      overflow-y: auto;
    }
  }
}
.alarmDialogVis {
  z-index: 9999;
  width: 1095px;
  height: 719px;
  background-image: url('@/assets/allPic/组 143@1x.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 181px;
  .closeX {
    display: flex;
    justify-content: right;
    padding-right: 5px;
    padding-top: 5px;
    img {
      cursor: pointer;
    }
  }
  .title {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    padding-left: 30px;
    margin-bottom: 8px;
    // text-align: center;
  }

  .footerPage {
    width: 100%;
    text-align: center;
    margin: 10px auto 0;
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #232732 !important; // 进行修改选中项背景和字体
      color: #fff;
    }
  }
  .formDiv {
    display: flex;
    padding-left: 20px;
    .formItem {
      display: flex;
      align-items: center;
      .title {
        margin-right: 20px;
        font-size: 16px;
      }
      .formInp {
        width: 300px;
        height: 35px;
        ::v-deep .el-input__inner {
          background-color: #393939 !important;
          border: 1px solid #5b5b5b;
          color: #fff;
        }
      }
    }
    .searchBtn {
      margin-left: 20px;
      background-color: #2fc4b2;
      color: #fff;
      font-size: 16px;
    }
  }
  .table {
    width: 1000px;
    padding: 20px 46px 0;
  }
}
</style>
